import React from "react";
import { Tooltip } from "antd";
import classNames from "classnames";
import "./ActionButton.less";

export default class ActionButton extends React.Component {
  onClick(e) {
    const { bubble, disabled, onClick } = this.props;
    const action = e.currentTarget.getAttribute('data-action');

    if (!bubble && action) {
      e.stopPropagation();
    }

    if (disabled) return;

    onClick(action, e);
  }

  render() {
    const { action, tip, disabled, children } = this.props;

    return (
      <span
        data-action={action}
        className={classNames('edc-action-btn', { disabled })}
        onClick={this.onClick.bind(this)}
      >
        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@tpx0pd`} placement='bottom' title={tip}>
          <i className={`icon-edc-app-${action}`}></i>
        </Tooltip>
        {children && <span style={{ paddingLeft: 5 }}>{children}</span>}
      </span>
    );
  }
}

ActionButton.defaultProps = {
  tip: '',
  action: '',
  bubble: false,
  disabled: false,
  onClick: () => { },
}